<template>
    <div style="text-align: center; overflow-y: scroll;">
        <div v-for="dict in data" v-bind:key="dict.code" @click="onSelected(dict)" class="dict-item" :class="{'dict-direction-item-selected': selectedItem.code == dict.code}">
        <img style="width: 60px; height: 60px; margin-top: 10px;" src="../../static/pictures/translator.svg">
        <p>{{ dict.source + "-" + dict.destination }}</p>
        </div>
    </div>
</template>

<style lang="scss" scoped>

$primary-color: #3ba776;

.dict-item {
  height: 100px;
  width: 120px;
  background-color: rgb(255, 253, 253);
  display: inline-block;
  margin: 5px;

  vertical-align: top;

  box-shadow: 0px 0px 5px rgb(209, 209, 209);
}

.dict-direction-item-selected {
  border: {
    bottom: {
      style: solid;
      color: $primary-color;
      width: 2px;
    }
  }
}
</style>


<script>
export default {
    model: {
        event: "onChange",
        prop: "selectedItem"
    },
    props: {
        selectedItem: {
            type: Object,
            required: true
        },
        data: {
            type: Array,
            required: true
        },
    },
    methods: {
        onSelected(item){
            this.$emit("onChange", item)
        }
    }
}
</script>
